<template>
  <el-form ref="form" :model="form">
    <Tabler
      :tableData="form.table"
      :height="300"
      :tableConfigArr="columns"
      :rules="columns.rules"
    >
      <template #gangchang="{ item, scope }">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-select
            v-model="form.table[scope.$index][item.prop]"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="it in item.options"
              :label="it.label"
              :value="it.value"
              :key="it.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #caizhi="{ item, scope }">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-select
            v-model="form.table[scope.$index][item.prop]"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="it in item.options"
              :label="it.label"
              :value="it.value"
              :key="it.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #pinzhong="{ item, scope }">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-input v-model="form.table[scope.$index][item.prop]"> </el-input>
        </el-form-item>
      </template>
      <template #guige="{ item, scope }" prop="guige">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-input v-model="form.table[scope.$index][item.prop]"> </el-input>
        </el-form-item>
      </template>
      <template #jiaohuoqi="{ item, scope }">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-input v-model="form.table[scope.$index][item.prop]"> </el-input>
        </el-form-item>
      </template>
      <template #zhongliang="{ item, scope }">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-input v-model="form.table[scope.$index][item.prop]"> </el-input>
        </el-form-item>
      </template>
      <template #zhidaojia="{ item, scope }">
        <el-form-item
          :prop="`${item.prop}-${scope.$index}`"
          :rules="item.rules"
        >
          <el-input v-model="form.table[scope.$index][item.prop]"> </el-input>
        </el-form-item>
      </template>
      <template #opt="{ item, scope }">
        <el-button
          type="text"
          style="width: 30px"
          v-model="form.table[scope.$index][item.prop]"
          @click="add(scope)"
          >增加</el-button
        >
        <el-button
          type="text"
          style="width: 30px"
          v-model="form.table[scope.$index][item.prop]"
          @click="handleDelRow(scope.$index)"
          >删除</el-button
        >
      </template>
    </Tabler>
  </el-form>
</template>

<script>
import { tabletitle } from "../../assets/js/toptable";
import { table } from "../../assets/js/table";

export default {
  data() {
    return {
      form: { table },
      rules: {},
    };
  },
  computed: {
    columns() {
      return tabletitle(this.form.table);
    },
  },
  mounted() {},
  methods: {
    add(scope) {
      const { table } = this.form || {};
      console.log(scope.row);
      table.push({ ...scope.row }); //往数组前面新增unshift
    },
    handleDelRow(index) {
      this.$confirm("确定删除吗", "提示").then(() => {
        table.splice(index, 1);
      });
    },
  },
};
</script>

<style>
</style>